<template>
	<view>

		<ywkefu></ywkefu>
		<view class="header" id="header">
			<view class="u-p-20 search">
				<u-search :show-action="false" v-model="params.keyword" action-text="搜索" placeholder="输入商品名称搜索云库"
					:animation="true" margin="20rpx" showAction="true" maxlength="30" @click="searchGoodsName()"
					@clickIcon="searchGoodsName()" @search="searchGoodsName()" @custom="searchGoodsName()"></u-search>
				<u-icon name="scan" size="28" @click="qRCodeSearch()"></u-icon>
			</view>
			<view class="reply-operate" v-if="params.type==2 || params.type==3">
				<!--				<view class="operate" @click.stop="selectStore()">-->
				<!--					<view class="title">{{storeName}}</view>-->
				<!--					<view>-->
				<!--						<u-icon name="arrow-down" color="rgba(0, 0, 0, 0.5)" size="11"></u-icon>-->
				<!--					</view>-->
				<!--				</view>-->

				<store ref="store" @storeData="getStore"></store>

			</view>
		</view>
		<view class="content">
			<view class="goods-left">
				<scroll-view :style="{ height: height + 'px'}" scroll-y="true" :scroll-with-animation="true"
					:enable-back-to-top="true" @scrolltolower="reachBottomGroup">
					<view class="goods-group" style="display:flex;align-items:center;"
						v-for="(item, index) in commodityGroupList" :key="index" @click="clickGroup(item)">
						<view class="goods-group-border" v-if="item.id == params.commodityGroupId"></view>
						<view class="goods-group-name" :class="item.id == params.commodityGroupId? 'color' :''">
							{{item.name}}</view>
					</view>
				</scroll-view>
			</view>

			<scroll-view :style="{ height: height + 'px'}" v-if="goodsList.length>0" scroll-y="true"
				:scroll-with-animation="true" :enable-back-to-top="true" @scrolltolower="reachBottom">
				<view class="item-box" v-for="(item, index) in goodsList" :key="index">
					<view class="flex" @click="selected(item)">
						<view style="height: 140rpx">
							<u--image v-if="item.fileName" :showLoading="true" :src="imgURL + item.fileName"
								width="150rpx" height="150rpx">
							</u--image>
							<u--image v-else :showLoading="true"
								:src="staticFileUrl+'/image/common/default_goods_image.svg'" width="150rpx"
								height="150rpx">
							</u--image>
						</view>
						<view class="gift-container">
							<view class="gift-box text-30">
								<text style="display: flex;flex-wrap: wrap;">{{item.name}}</text>
							</view>
							<view class="gift-box text-20" v-if="params.type==5">
								<text>条形码：{{item.barCode?item.barCode:'暂无数据'}}</text>
							</view>

							<view class=" text-20" v-if="params.type==2">
								<text>兑换价:</text>
								<text v-if="item.integralConversionPrice">{{item.integralConversionPrice}}积分</text>
								<text v-if="item.integralConversionPrice && item.lotteryConversionPrice">/</text>
								<text v-if="item.lotteryConversionPrice">{{item.lotteryConversionPrice}}彩票</text>
								<text v-if="item.coinConversionPrice && item.lotteryConversionPrice">/</text>

								<text v-if="item.coinConversionPrice">{{item.coinConversionPrice}}币</text>
								<text v-if="!item.integralConversionPrice && !item.lotteryConversionPrice
									&& !coinConversionPrice ">暂无</text>

							</view>
							<view class=" text-20" v-if="params.type==2">
								回收价:
								<text v-if="item.recoveryPrice">{{item.recoveryPrice}}积分</text>
								<text v-else-if="!item.recoveryPrice">暂无</text>
							</view>

							<view class="text-20" v-if="params.type==3 && item.playNames">
								<view>包含项目:{{item.playNames}}</view>
								<view class="u-m-t-10" style="display: flex;flex-wrap: wrap;">
									<text
										v-if="item.integralConversionPrice || item.lotteryConversionPrice || item.coinConversionPrice">兑换价:</text>
									<text v-if="item.integralConversionPrice">{{item.integralConversionPrice}}积分</text>
									<text v-if="item.integralConversionPrice && item.lotteryConversionPrice">/</text>
									<text v-if="item.lotteryConversionPrice">{{item.lotteryConversionPrice}}彩票</text>
									<text v-if="item.coinConversionPrice && item.lotteryConversionPrice">/</text>
									<text><text v-if="item.coinConversionPrice">{{item.coinConversionPrice}}币</text>
									</text>
								</view>
							</view>
							<!-- <view class="text-20"> -->
							<!-- 							<text>库存：{{item.inventory}}</text>
									<text class="salesVolume">销量：{{item.salesVolume}}</text> -->
							<!-- </view> -->
							<view class="gift-box text-price">
								<text>￥{{item.retailPrice}}</text>
							</view>
						</view>
					</view>
					<view class="operation">
						<u-button type="primary" color="#CCCCCC" text="删除" @click.native.stop="delGoods(item.id)"
							:plain="true"
							:customStyle="{width: '112rpx', height: '50rpx', borderRadius: '30rpx',margin:'0 0 0 23rpx',color:'#000000CC'}" />
						<u-button type="primary" color="#CCCCCC" text="编辑" @click="edit(item)" :plain="true"
							:customStyle="{width: '112rpx', height: '50rpx', borderRadius: '30rpx',margin:'0',color:'#000000CC'}" />

					</view>
				</view>
				<view style="height: 50rpx"></view>
			</scroll-view>

			<u-empty text="暂无商品" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" v-else></u-empty>
		</view>

		<view class="footer" id="footer">
			<view class=" u-m-b-40 u-m-t-20 footer-group" @click="routing()">分类管理</view>
			<view class="u-p-l-30 u-p-r-30 u-m-b-40 u-m-t-20">
				<u-button shape="circle" color="rgb(96,114,255)" :text="params.type==3?'添加套票':'添加商品'"
					@click="showOpen()"></u-button>
			</view>
		</view>

		<u-popup :show="show" mode="bottom" @close="cancel" :round="10">
			<view class="addGoods flex" @click="qRCodeAdd()">
				<u--image :src="staticFileUrl+'/image/pages-vending-machine/goods/goodsInfo/path.svg'" width="60rpx"
					height="60rpx">
				</u--image>

				<view class="goodsText">
					<view>扫条形码</view>
					<view class="text-20">通过扫条形码从云库添加，自动录入产品图片和信息</view>
				</view>
			</view>
			<view class="addGoods flex" @click="navAddGoods()">
				<u--image :src="staticFileUrl+'/image/pages-vending-machine/goods/goodsInfo/ManualAddition.svg'"
					width="60rpx" height="60rpx">
				</u--image>
				<view class="goodsText">
					<view>手动添加</view>
					<view class="text-20">手动填写添加产品信息</view>
				</view>
			</view>
			<view class="u-p-l-30 u-p-r-30 u-m-b-10 u-m-t-20">
				<u-button shape="circle" color="rgb(228, 228, 228)" text="取消" @click="cancel()"></u-button>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import store from '@/components/store/store.vue';
	export default {
		components: {
			store,
		},
		data() {
			return {
				storeStatusList: [
					[{
						id: 0,
						name: '下架',
					}, {
						id: 1,
						name: '上架',
					}, ]
				],
				storeName: '全部场地',
				imgURL: this.$configPath.imgURL,
				staticFileUrl: this.$configPath.staticFileUrl,
				params: {
					pageNum: 1,
					pageSize: 10,
					totalPage: 1,
					keyword: '',
					type: 2,
					merchantStoreId: -1,
					commodityGroupId: 0,
					commodityStoreStatus: 1,
					branchType:''
				},
				paramsGourp: {
					pageNum: 1,
					pageSize: 12,
					totalPage: 1,
					type: 2,
					branchType:''
				},
				goodsList: [],
				commodityGroupList: [{
					id: 0,
					name: "全部"
				}],
				loadStatus: 'loading',
				status: 'loading',
				show: false,
				height: 0,
				from: '',
			};
		},
		onReady() {
			this.getPomHeight();
		},

		onLoad(option) {
			if (option.type != null) {
				this.paramsGourp.type = option.type;
				this.params.type = option.type;
				if (option.type == 2) {
					uni.setNavigationBarTitle({
						title: '商品管理'
					})
				} else if (option.type == 3) {
					uni.setNavigationBarTitle({
						title: '游乐套票'
					})
				} else {
					uni.setNavigationBarTitle({
						title: '商品管理'
					})
				}
			}
			if (option.from != null) {
				this.from = option.from;
			}
			if(option.branchType != null){
				this.paramsGourp.branchType = option.branchType
				this.params.branchType = option.branchType
			}
		},
		onShow() {
			this.refresh();
		},
		// 下拉事件
		onPullDownRefresh() {
			this.refresh();
		},
		methods: {
			// 刷新页面
			refresh() {
				this.params.pageNum = 1;
				this.paramsGourp.pageNum = 1;
				this.goodsList = [];
				this.commodityGroupList = [{
					id: 0,
					name: "全部"
				}];
				this.findByUserIdAndType();
				this.selectCommodity();
			},
			selected(item) {
				if (uni.$u.test.isEmpty(this.from)) {
					return;
				}
				if ('restock' == this.from) {
					setTimeout(() => {
						uni.$emit('restock', {
							commodityId: item.id,
						})
					}, 500);
					this.$u.route({
						type: 'navigateBack'
					})
				}
			},
			delGoods(commodityId) {
				uni.showModal({
					content: `是否确认删除并下架该商品？`,
					success: e => {
						if (e.confirm) {
							uni.showLoading({
								title: '删除中...',
								mask: true
							})
							let params = {
								'commodityId': commodityId,
								'branchType':this.params.branchType
							}
							this.$api('commodity.commodityOffTheShelves',params).then(res => {
									if (res.status == 0) {
										this.$helpers.toast('删除成功');
										uni.hideLoading();
										this.refresh();
									} else {
										this.$helpers.toast('删除异常:' + res.msg);
										uni.hideLoading();
									}

								})
								.catch(() => {
									uni.hideLoading();
								});
						}
					},
					fail() {}
				});
			},

			findByUserIdAndType() {
				this.$api('commodityGroup.findByUserIdAndType', this.paramsGourp).then(res => {
					if (res.status == 0) {
						this.loadStatus = res.data.pageNum === res.data.pages ? 'nomore' : 'loadmore';
						this.commodityGroupList = [...this.commodityGroupList, ...res.data.list]; //合并数组
					} else {
						this.$helpers.toast("查询数据失败", res.msg);
					}
				})
			},

			selectCommodity() {
				this.$api('commodity.findCommodityList', this.params)
					.then(res => {
            uni.stopPullDownRefresh();
						console.log(res);
						if (res.status == 0) {
							this.pages = res.data.pages;
							this.status = res.data.list.length === 10 ? 'loadmore' : 'nomore';
							this.goodsList = [...this.goodsList, ...res.data.list]; //合并数组
							console.log(this.goodsList.length)
						} else {
							this.$helpers.toast('请求数据失败:' + res.msg);
						}
					}).catch(err => {
            uni.stopPullDownRefresh();
        })
			},

			routing() {
				uni.navigateTo({
					url: '/pages-commodity/commodity-group?type=' + this.params.type + '&isHideCheck=' + true + '&branchType='+this.params.branchType
				});
			},

			selectStore() {
				this.$refs.store.init(true)
			},
			getStore(data) {
				if (data.value) {
					this.params.pageNum = 1;
					this.goodsList = [];
					this.storeName = data.label;
					this.params.merchantStoreId = data.value;
					this.selectCommodity();
				}
			},
			clickGroup(item) {
				this.params.pageNum = 1;
				this.goodsList = [];
				this.params.commodityGroupId = item.id;
				this.selectCommodity();
			},
			//扫条码搜索商品
			qRCodeSearch() {
				uni.showLoading({
					title: "正在调起...",
					mask: true
				})
				var that = this;
				uni.scanCode({
					success: function(res) {
						if (that.params.type == 3 || that.params.type == 2) {
							that.params.keyword = res.result
							that.params.pageNum = 1;
							that.goodsList = [];
							that.selectCommodity();
						} else {
							that.show = false;							
							uni.navigateTo({
								url: '/pages-vending-machine/goods/addGoods?barCode=' + res.result
							});
						}
						uni.hideLoading();
					},
					fail(res) {
						console.log(res);
						uni.hideLoading();
					}
				});
			},
			// 调用微信扫一扫
			qRCodeAdd() {
				uni.showLoading({
					title: "正在调起...",
					mask: true
				})
				var that = this;
				uni.scanCode({
					success: function(res) {
						if (that.params.type == 3) {
							that.params.keyword = res.result
							that.params.pageNum = 1;
							that.goodsList = [];
							that.selectCommodity();
						} else if (that.params.type == 2) {
							console.log("result", res.result)
							that.show = false;
							uni.navigateTo({
								url: '/pages-commodity/goods-edit2?barCode=' + res.result
							});
						} else {
							that.show = false;
							uni.navigateTo({
								url: '/pages-vending-machine/goods/addGoods?barCode=' + res.result
							});
						}
						uni.hideLoading();
					},
					fail(res) {
						console.log(res);
						uni.hideLoading();
					}
				});
			},
			//关键字搜索
			searchGoodsName() {
				this.goodsList = [];
				this.params.pageNum = 1;
				this.selectCommodity();
			},

			//编辑
			edit(data) {
				if (this.params.type == 2) {
					uni.navigateTo({
						url: '/pages-commodity/goods-edit2?commodity=' + JSON.stringify(data)
					});
				} else if (this.params.type == 3) {
					uni.navigateTo({
						url: '/pages-commodity/package-ticket/package-ticket?commodity=' + JSON.stringify(data)
					});
				} else {
					uni.navigateTo({
						url: '/pages-vending-machine/goods/addGoods?commodityId=' + data.id
					});
				}

			},

			showOpen() {
				if (this.params.type == 3) {
					uni.navigateTo({
						url: '/pages-commodity/package-ticket/package-ticket'
					});
				} else {
					this.show = true;
				}
			},
			cancel() {
				this.show = false;
			},
			navAddGoods() {
				this.show = false;
				if (this.params.type == 2) {
					console.log("是否进入")
					uni.navigateTo({
						url: '/pages-commodity/goods-edit2'
					});
				} else {
					uni.navigateTo({
						url: '/pages-vending-machine/goods/addGoods'
					});
				}
			},
			//加载更多
			reachBottomGroup() {
				if (this.loadStatus == 'nomore') {
					return;
				}
				this.loadStatus = 'loading';
				this.paramsGourp.pageNum++;
				this.findByUserIdAndType();
			},
			reachBottom() {
				if (this.status == 'nomore') {
					return;
				}
				this.status = 'loading';
				this.params.pageNum++;
				this.selectCommodity();
			},

			// 获取各个盒子的高度
			getPomHeight() {
				let query = wx.createSelectorQuery().in(this)
				query.select('#header').boundingClientRect()
				query.select('#footer').boundingClientRect()
				query.exec(res => {
					let windowHeight = wx.getSystemInfoSync().windowHeight
					this.height = windowHeight
					for (let i = 0; i < res.length; i++) {
						this.height -= res[i].height;
					}
				})

			},
		}
	};
</script>

<style lang="scss">
	page {
		background: #ffffff;
	}

	/deep/ .u-button--active {
		color: #ffffff !important;
		background: rgb(96, 114, 255) !important;
	}

	.text-30 {
		color: rgb(34, 34, 34);
		font-size: 30rpx;
		margin-bottom: 13rpx;
	}

	.text-price {
		color: rgb(255, 0, 0);
		font-size: 24rpx;
	}

	.text-20 {
		color: rgba(34, 34, 34, 0.6);
		font-size: 24rpx;
	}

	.header {
		background-color: #FFFFFF;

		.search {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.reply-operate {
			display: grid;
			grid-template-columns: repeat(2, auto);

			.operate {
				padding-left: 30rpx;
				margin-bottom: 30rpx;
				display: flex;
				align-items: center;

				.title {
					margin-right: 10rpx;
				}
			}
		}
	}

	.footer {
		width: 100%;
		background-color: white;
		position: fixed;
		bottom: 0rpx;
		z-index: 100;
		width: 100%;
		display: grid;
		grid-template-columns: 1fr 3fr;

		.footer-group {
			color: rgb(96, 114, 255);
			font-size: 26rpx;
			padding-top: 20rpx;
			text-align: center;
		}
	}

	.content {
		height: 100%;
		display: grid;
		grid-template-columns: 1fr 3fr;

		.goods-left {
			.goods-group {
				//display: flex;
				//align-content: center;
				//text-align: center;
				font-size: $f-sm;
				//text-align: center;
				padding: 28rpx 25rpx;
			}

			.goods-group-border {
				border-left: 7rpx solid rgb(96, 114, 255);
				border-radius: 20%;
				color: rgb(96, 114, 255);
				height: 20rpx;
			}

			.goods-group-name {
				padding-left: 8rpx;
			}

			.color {
				color: rgb(96, 114, 255);
				font-size: 28rpx;
			}
		}

	}

	.item-box {
		// margin: 20rpx 24rpx;
		border-radius: 16rpx;
		background-color: rgb(255, 255, 255);
		padding: 30rpx;
	}

	.operation {
		margin-top: 15rpx;
		display: flex;
		flex-direction: row-reverse;
	}

	.flex {
		width: 100%;
		display: flex;
	}

	.gift-container {
		width: 100%;
		margin-left: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		.gift-box {
			display: flex;
			justify-content: space-between;
		}

		.salesVolume {
			margin-left: 20rpx;
		}

	}


	.addGoods {
		padding: 60rpx 60rpx 30rpx 60rpx;

		.goodsText {
			margin-left: 29rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}
	}
</style>
